<script setup>
import { reactive } from "vue";
import { ref } from "vue";
import { computed } from "vue";
var top_text = "<h3>张三</h3>";
const data = [
  {
    id: 3,
    name: "懒人小沙发",
    describe: "舒适休闲，完善支撑",
    price: 126.4,
    isHot: 1,
  },
  { id: 4, name: "减压弹力球", describe: "释放压力，放松身心", price: 95.2 },
  { id: 5, name: "简约一字发夹", describe: "简约设计，百搭款式", price: 15.9 },
  {
    id: 6,
    name: "毛线小兔子耳朵发夹",
    describe: "可爱萌趣，精致做工",
    price: 12.7,
  },
  {
    id: 6,
    name: "华为畅享 60X",
    describe: "7000mA 大电池鸿蒙系统",
    price: 688,
    isHot: 1,
  },
];
var find_text = ref("");
// 使用 computed 来实现搜索过滤
var filteredData = computed(() => {
  if (!find_text.value.trim()) {
    return data; // 如果搜索框为空，返回所有数据
  }
  const query = find_text.value.toLowerCase();
  console.log("搜索关键字：" + find_text.value);
  return data.filter(
    (item) =>
      item.name.toLowerCase().includes(query) ||
      item.describe.toLowerCase().includes(query)
  );
});
</script>
<template>
  <div class="top">
    <input type="text" v-model="find_text" placeholder="搜一搜" />
    <div class="top_h3" v-html="top_text"></div>
  </div>
  <h1 class="list_tit">商品列表</h1>
  <div class="list">
    <div class="list_ul">
      <div class="list_li" v-for="(v, k) in filteredData" :id="v.id" :key="k">
        <div class="li_img">商品图片</div>
        <p>&nbsp;&nbsp;{{ v.name }}</p>
        <span>&nbsp;&nbsp;{{ v.describe }}</span>
        <h3>
          &nbsp;&nbsp;{{ v.price }}
          <span class="isHot" v-if="v.isHot">热销</span>
        </h3>
      </div>
    </div>
  </div>
</template>
<style scoped>
.top {
  height: 53px;
  background: #5c5c5c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top input {
  display: block;
  padding-left: 5px;
  color: #666;
  width: 150px;
  height: 32px;
  border-radius: 10px;
}
.top button {
  display: block;
  padding-left: 5px;
  color: #666;
  width: 50px;
  height: 35px;
  border-radius: 10px;
  border: none;
}
.top_h3 {
  width: 1080px;
  font-weight: 100;
  line-height: 53px;
  color: #f2f2f2;
  text-align: end;
}
.list_tit {
  width: 1280px;
  margin: 30px auto 50px;
}
.list {
  width: 100%;
  display: flex;
  justify-content: center;
}
.list_ul {
  width: 1280px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.list_li {
  position: relative;
  width: 290px;
  border-radius: 5px;
  height: 90%;
  text-align: left;
  overflow: hidden;
  margin: 0 18px 20px 0;
  border: 2px solid rgb(216, 205, 205);
  box-shadow: #5c5c5c;
}
.li_img {
  width: 100%;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #abe1cc;
}
.list_li p {
  font-size: 18px;
  line-height: 30px;
}
.list_li span {
  display: block;
  font-size: 14px;
  color: #888;
}
.list_li h3 {
  font-size: 28px;
  color: #cf4444;
  line-height: 10px;
}
.list_li .isHot {
  position: absolute;
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #cf4444;
  border-radius: 10px;
  bottom: 25px;
  right: 10px;
  color: yellow;
  font-family: "宋体";
}
</style>
